<template>
  <div class="message-container">
    <el-button @click.native="betchAll()" type="text" class="batchtitle">批量已读</el-button>
    <vol-table ref="tableData" :height="'80vh'" :loadKey="true" :columns="columns8" :pagination-hide="true" :tableData="tableData8" :index="true" @rowClick="rowClick"></vol-table>
    <!-- <vol-box
  :lazy="true"
  :model.sync="model.box1"
  title="查看内容"
  :height="400"
  :width="400"
  :padding="15">
  <div>{{content}}</div>
  <div slot="footer">
    <Button type="default" @click="confirm()">确认</Button>
    <Button type="default" @click="model.box1 = false">关闭</Button>
  </div>
</vol-box> -->
  </div>
</template>

<script>
import VolTable from '@/components/basic/VolTable.vue'
import VolBox from '@/components/basic/VolBox.vue'
export default {
  components: {
    VolTable,
    VolBox,
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
    messageModel: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    messageModel: () => {
      console.log(this.messageModel)
      if (this.messageModel) {
        this.GetSmallLogCh()
      }
    },
  },
  data() {
    return {
      model: { box1: false },
      timer: '',
      params: {},
      tableData8: [],
      content: '',
      columns8: [
        {
          field: 'beginDate',
          title: '开始时间',
          type: 'string',
          width: 160,
          align: 'left',
        },
        {
          field: 'endDate',
          title: '结束时间',
          type: 'string',
          width: 160,
          align: 'left',
        },
        {
          field: 'isRead',
          title: '状态',
          type: 'int',
          bind: {
            key: '',
            data: [
              { key: 0, value: '未读' },
              { key: 1, value: '已读' },
            ],
          },
          width: 60,
          align: 'left',
        },
        {
          field: 'userName',
          title: '操作人',
          type: 'string',
          width: 140,
          align: 'left',
        },
        {
          field: 'logType',
          title: '日志类型',
          type: 'string',
          width: 150,
          align: 'left',
        },
        {
          field: 'exceptionInfo',
          title: '操作内容',
          type: 'string',
          width: 450,
          align: 'left',
          show: true,
        },
      ],
    }
  },
  created() {
    // if (!this.list.length) {
    //   console.log(this.list,"this.list")
    //   this.tableData8=this.list
    //   // this.list.push({
    //   //   title: '消息测试标题',
    //   //   message: '消息测试内容消息测试内容消息测试内容消息测试内容',
    //   //   date: '2022-05-02 03:10'
    //   // });
    // }
    console.log(this.$refs.div.clientHeight);
  },
  mounted() {
    this.tableData8 = this.list
  },
  methods: {
    rowClick({ row, column, event }) {
      this.content = row.logType + ':' + row.exceptionInfo
      this.$refs.tableData.$refs.table.toggleRowSelection(row)
      this.$confirm(`${this.content}`, '提示', {
        confirmButtonText: '已读',
        cancelButtonText: '未读',
        customClass: 'del-model',
        type: 'warning',
      })
        .then(() => {
          var formdata = new FormData()
          formdata.append('Ids', row.id.toString())
          this.http.post('api/Small_Notification/ReadNotification', formdata).then((res) => {
            this.GetSmallLogCh()
          })
        })
        .catch(() => {
          this.$refs.tableData.$refs.table.toggleRowSelection(row)
        })
        return true
    },
    betchAll() {
      let betchArr = this.$refs.tableData.getSelected()
      let ids = []
      betchArr.forEach((item) => {
        ids.push(item.id)
      })
      let idsStr = ids.toString()
      var formdata = new FormData()
      formdata.append('Ids', idsStr)
      if (ids.length === 0) return this.$Message.info("至少选择一条数据");
      this.http.post('api/Small_Notification/ReadNotification', formdata).then((res) => {})
      this.$nextTick(() => {
        this.GetSmallLogCh()
      })
    },
    GetSmallLogCh() {
      let params = {
        order: 'asc',
        page: 1,
        rows: 100,
        sort: 'beginDate',
        wheres: '[{"name":"isRead","value":"0","displayType":"Equal"}]',
      }
      this.http.post('/api/Small_Notification/GetNotification', params).then((res) => {
        this.tableData8 = res.rows
        this.$Message.success("已读完成");
      })
    },
  },
}
</script>
<style scoped lang="less">
.message-container {
  .title {
    padding-bottom: 10px;
  }
  .item {
    border-bottom: 1px solid #eee;
    padding: 10px 20px;
  }
  .content {
    color: #7e7e7e;
    font-size: 13px;
  }
  .batchtitle {
    float: right;
    z-index: 1;
    position: relative;
  }
}
</style>
